<template>
  <div class="box">
    <van-nav-bar title="更改手机号" left-arrow @click-left="$router.go(-1)"></van-nav-bar>
    <div class="Userpersonal">
      <!-- <div class="Userpersonaltel">
        <span>手机号</span>
        <input type="text" :value="usernametel" placeholder="请输入手机号" @change="changeUsernametel">
      </div> -->
      <van-cell-group class="Userpersonaltel">
        <van-field :value="usernametel" type="tel" placeholder="请输入用户名" label="手机号" @input="changeUsernametel" />
      </van-cell-group>
      <div v-if="Userpersonalbtnbool" class="Userpersonalbtn1">下一步</div>
      <div v-else class="Userpersonalbtn2" @click="Trueusernametel">下一步</div>
    </div>
    <van-overlay :show="show" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="Userpersonalmark">
          <p>请确认手机号</p>
          <p>{{usernametel}}</p>
          <p>
            <span @click="confirmShow">确定</span>
            <span @click="cancelShow">取消</span>
          </p>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
// 导入请求数据函数
import { ModifyUserPhone } from '@/api'
// 安装好vue的ui库后在这里引入模块, 使用vant ui库组件三部曲引入vue 引入组件 使用组件
import Vue from 'vue'
import { NavBar, Overlay, Field, CellGroup, Toast } from 'vant'
Vue.use(NavBar)
Vue.use(Overlay)
Vue.use(Field)
Vue.use(CellGroup)
export default {
  // 设置data初始值
  data () {
    return {
      show: false, // 控制模态框的显隐
      usernametel: '', // 输入框绑定的手机号的值的初始状态
      Userpersonalbtnbool: true, // 控制当前手机号通过真则的判断后下一步按钮是否可用之类的
      telstr: '' // 接收去横杠后的手机号
    }
  },
  // 注册组件
  components: {},
  // 生命周期钩子函数
  mounted () {},
  // 计算属性
  methods: {
    // 更改手机号
    changeUsernametel (value) {
      // console.log(value)
      if (value.length === 3 || value.length === 8) {
        this.usernametel = `${value}-`
      } else {
        this.usernametel = value
      }
      // console.log(this.usernametel)
      // if ((/^1[3456789]\d{9}/.test(e))) { // 原正则
      if ((/^1[3456789]\d{1}-\d{4}-\d{4}$/.test(value))) { // 加横杠正则
        // console.log('正则通过')
        this.Userpersonalbtnbool = false
      } else {
        // console.log('正则未通过')
        this.Userpersonalbtnbool = true
      }
    },
    Trueusernametel () {
      this.show = true
    },
    // 取消按钮
    cancelShow () {
      this.show = false
    },
    // 确定按钮
    confirmShow () {
      // 将中间加横杠的手机号去横杠
      // console.log((this.usernametel).split('-'))
      // console.log(arr)
      const arr = (this.usernametel).split('-')
      arr.map((item) => {
        this.telstr += item
      })
      // console.log(this.telstr)
      ModifyUserPhone({
        phone: Number(this.telstr)
      }).then((res) => {
        // console.log(res)
        if (res.data.code === 200) {
          Toast('手机号修改成功,即将跳转到修改个人信息页面')
          setTimeout(() => {
            this.$router.replace('/my_Personal')
          }, 1000)
        } else {
          Toast('手机号修改失败,请重新输入')
          this.usernametel = ''
        }
      })
      this.show = false
      // 然后可以调用后端数据接口更改数据后判断接收到的状态码,然后跳转回上一个页面
    }
  }
}
</script>

<style lang="scss" scoped>
.Userpersonal {
  width: 100%;
  height: auto;
  padding: 0 0.15rem;
  .Userpersonaltel {
    width: 100%;
    margin-top: 0.5rem;
    height: 0.34rem;
    line-height: 0.34rem;
    border-bottom: 1px solid #bebebe;
    span {
      float: left;
      color: #1C1C1C;
      font-size: 0.14rem;
      margin-right: 0.15rem;
    }
    input {
      border: none;
      float: left;
      height: 0.34rem;
      border-bottom: 1px solid #bebebe;
      font-size: 0.13rem;
      line-height: 0.34rem;
      text-align: left;
    }
  }
  .Userpersonalbtn1 {
    width: 100%;
    height: 0.49rem;
    border-radius: 0.05rem;
    background: #d2d2d2;
    margin-top: 0.4rem;
    color: #949494;
    text-align: center;
    line-height: 0.49rem;
  }
  .Userpersonalbtn2 {
    width: 100%;
    height: 0.49rem;
    border-radius: 0.05rem;
    background: #FDD949;
    margin-top: 0.4rem;
    color: #1C1C1C;
    text-align: center;
    line-height: 0.49rem;
  }
}
.Userpersonalmark {
  width: 3rem;
  height: 1.5rem;
  position: absolute;
  top: 1.95rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: white;
  border-radius: 0.1rem;
  padding: 0.15rem 0.25rem;
  p:nth-of-type(1) {
    font-size: 0.16rem;
    margin-top: 0.25rem;
    height: 0.16rem;
    line-height: 0.16rem;
    margin-bottom: 0.15rem;
    color: #1C1C1C;
  }
  p:nth-of-type(2) {
    font-size: 0.14rem;
    height: 0.14rem;
    line-height: 0.14rem;
    margin-bottom: 0.3rem;
    color: #1C1C1C;
  }
  p:nth-of-type(3) {
    height: 0.14rem;
    line-height: 0.14rem;
    span:nth-of-type(1) {
      text-align: right;
      width: 0.5rem;
      height: 0.14rem;
      float: right;
    }
    span:nth-of-type(2) {
      text-align: right;
      width: 0.5rem;
      height: 0.14rem;
      float: right;
    }
  }
}
/deep/ .van-nav-bar {
  height: 0.6rem;
  background: #FDD949;
  box-shadow: 0px 0.05rem 0.05rem 0.01rem rgba(214,214,214,0.42);
}
/deep/ .van-icon-arrow-left {
  font-size: 0.18rem;
  line-height: 0.6rem;
  color: #000000;
}
/deep/ .van-nav-bar__title {
  font-size: 0.16rem;
  line-height: 0.6rem;
  color: #1C1C1C;
}
</style>
